<script setup>
import HeadBarQWeather from "./HeadBarQWeather.vue"
import UserinfoBrief from './UserinfoBrief.vue'
import {useRouter} from 'vue-router'
import { useHomeStore } from "@/stores/home";
import {inject, onMounted} from "vue";
const mobile = inject('mobile')
const useStore = useHomeStore();
const router = useRouter()
const handleSet = ()=>{
  if(useStore.token){
      if (useStore.dialogTableVisible === false) {
      useStore.dialogTableVisible = true
    }
  }else{
    ElMessageBox.confirm("您还没登录呢！", "", {
    confirmButtonText: "去登录",
    cancelButtonText: "取消",
    center: true,
    confirmButtonClass:"btnClass",
    cancelButtonClass:"btnClass"
  })
    .then(() => {
      router.push("/login");
    })
  }
  
}
const userPush = () => {
  useStore.personal = !useStore.personal;
};
onMounted(()=>{
});
</script>

<template>
  <div class="header">
    <HeadBarQWeather v-show="useStore.isMask" v-if="useStore.showWeather" @click.stop @contextmenu.stop.prevent />
    <div class="empty" v-else></div>
    <div class="header-right" v-show="useStore.isMask">
      <div class="user-avatar" @click.stop @contextmenu.stop.prevent>
        <template v-if="!useStore.userinfo">
          <svg class="icon" aria-hidden="true" @click="$router.push('/login')">
            <use xlink:href="#icon-yonghu"></use>
          </svg>
          <div class="login-tips transition">
            <div class="login-tips-title">您尚未登录</div>
            <div class="login-tips-text">登录后，即体验自定义壁纸、网站捷径和云同步</div>
          </div>
        </template>
        <template v-else>
          <div v-if="mobile">
            <el-avatar :size="25" :src="useStore.avatar" @click="userPush" />
          </div>
          <div v-else>
            <UserinfoBrief />
          </div>
        </template>
      </div>
      <div class="setting-icon" @click.stop="handleSet" @contextmenu.stop.prevent>
        <svg class="icon">
          <use xlink:href="#icon-shezhitianchong"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  height: 2rem;
  text-align: center;
  width: calc(100% - 2rem);
  margin: 0 auto 1rem;
  transition: 550ms;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icon {
    width: 25px;
    height: 25px;
    fill: #6c6b6b !important;
  }
}
.header-right {
  display: flex;
  justify-content: space-between;
  width: 64px;
  height: 100%;
  align-items: center;
  cursor: pointer;
  &>div {
    line-height: 0;
    transition: 250ms;

    &:hover:nth-child(2) {
      transform: rotateZ(-90deg);
    }
  }
}
.user-avatar {
  position: relative;
}
.user-avatar:hover{
  .login-tips{
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
.login-tips {
  z-index: 9999;
  user-select: none;
  position: absolute;
  top: 50px;
  right: 40px;
  width: 290px;
  height: 90px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 15px 30px rgb(0 0 0 / 25%);
  font-size: 12px;
  opacity: 0;
  transform: translate(60px, -16px) scale(.8);
  &>div{
    margin-top: 30px;
  }
}
</style>
<style>
.el-message-box {
  border-radius: 10px !important;
}
.btnClass {
  z-index: 1;
  position: relative;
  font-size: 14px;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(236, 32%, 26%);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

.btnClass::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
}

.btnClass:hover {
  cursor: pointer;
  color: #161616;
}

.btnClass:hover::before {
  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
}

  .btnClass{
    background-color: black !important;
  }
  .btnClass span{
    color: #fff;
  }
  .btnClass span:hover{
    color: #161616 !important;
  }
</style>